<template>
	<view class="orderPage">
		<view
			class="row"
			v-for="item in orderList"
			:key="item._id"
			@click="goDetail(item)"
		>
			<view class="head">
				<view class="number">
					{{ item.order_id }}
					<text class="way">商家外送</text>
				</view>
				<view class="state">
					<u-icon
						name="weixin-fill"
						size="22"
						color="#04C15F"
					></u-icon>
					<text>已支付</text>
				</view>
			</view>
			<view class="body">{{ getCarsListName(item.carsList) }}</view>
			<view class="foot">
				<view class="time">{{ formatDate(item.createTime) }}</view>
				<view class="count">
					共{{ item.carsList.length }}件商品，实付
					<text class="price">￥{{ priceFormat(item.totalPrice) }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { priceFormat, formatDate } from '@/utils/tools.js';
const orderCloudObj = uniCloud.importObject('my-mall-order');
export default {
	data() {
		return {
			orderList: []
		};
	},
	onLoad() {
		this.getOrderList();
	},
	methods: {
		priceFormat,
		formatDate,
		goDetail(value) {
			let params = encodeURI(JSON.stringify(value));
			uni.navigateTo({
				url: '/pages/order/detail?item=' + params
			});
		},
		// 获取订单列表
		async getOrderList() {
			let res = await orderCloudObj.getList();
			this.orderList = res.data;
		},
		// 遍历购物车列表，返回名称
		getCarsListName(arr) {
			let name = arr.map((item) => {
				return item.name;
			});

			return name.join('/');
		},
		leftClick() {
			uni.reLaunch({
				url: '/pages/index/index'
			});
		}
	}
};
</script>
<style lang="scss">
page {
	background-color: $theme-back-color;
}
</style>
<style lang="scss" scoped>
.orderPage {
	padding: 120rpx 30rpx 30rpx;
	.row {
		background-color: #fff;
		padding: 40rpx 20rpx;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		.head {
			@include flex-box();
			font-size: 32rpx;
			.number {
				@include flex-box-set(start);
				.way {
					background-color: #19be6b;
					color: #fff;
					font-size: 22rpx;
					padding: 6rpx 20rpx;
					border-radius: 30rpx;
					margin-left: 10rpx;
				}
			}
			.state {
				color: $brand-theme-color-aux;
				@include flex-box-set(start);
			}
		}
		.body {
			border: 1px solid $border-color;
			padding: 60rpx 20rpx;
			border-radius: 10rpx;
			background-color: #f9f9f9;
			font-size: 34rpx;
			margin: 30rpx 0;
		}
		.foot {
			@include flex-box();
			font-size: 26rpx;
			color: #a5a5a5;
			.price {
				font-weight: bold;
				color: #000;
			}
		}
	}
}
</style>
